<template>
	<div class="quick-link-edit">
		<!-- 一行显示多少菜单项 -->
		<el-radio-group v-model="state.rowItemNum" size="large" class="radio-group" @change="changeRadio">
			<el-radio-button :label="3" class="radio-item" />
			<el-radio-button :label="4" class="radio-item" />
			<el-radio-button :label="5" class="radio-item" />
		</el-radio-group>
		<el-divider />
		<!-- 添加菜单 -->
		<!-- <div class="box-card"></div> -->
		<div style="width: 100%">
			<el-button type="primary" size="default" @click="addItem">添加菜单</el-button>
			<el-button type="warning" size="default" @click="doViewSort">调整顺序</el-button>
		</div>
		<div class="edit_form" ref="editForm">
			<QuickLinkItem
				v-for="(item, index) in state.addList"
				:key="index"
				:data="item"
				:cur="index"
				@delete="deleteItem"
				@upload="upload"
				:class="[item.anim ? 'edit_anim' : '']"
				@actionChange="actionChange"
			/>
		</div>

		<el-button class="button" @click="submit" style="width: 100%">
			<el-icon class="el-icon--right"> <ArrowLeft /> </el-icon>生成预览</el-button
		>
	</div>
</template>

<script setup lang="ts" name="EditForm">
import { ref, reactive, watch, onBeforeMount } from 'vue';
import QuickLinkItem from '/@/components/quickLinkItem/index.vue';
import { scorllBottom } from '/@/utils/utils.ts';

const editForm = ref();
const props = defineProps({
	// 列表内容
	data: {
		type: Object,
		default: () => {},
	},
	isRight: {
		type: Boolean,
		default: () => false,
	},
});

const state = reactive({
	addList: [],
	rowItemNum: 3,
});

const addItem = () => {
	state.addList.push({
		anim: true,
	});
	scorllBottom(editForm.value);
};

const deleteItem = (cur: number) => {
	state.addList.splice(cur, 1);
};

const upload = (data) => {
	const { url, index } = data;
	state.addList[index].imgUrl = url;
};

const changeRadio = (val) => {
	state.rowItemNum = val;
	submit();
};

const emit = defineEmits(['submit']);

watch(
	() => state,
	(val) => {
		submit();
	}
);

function doViewSort() {
	let sortArr = [];

	state.addList.forEach((item) => {
		console.log('🚀 ~ file: quickLinkEdit.vue:92 ~ state.addList.forEach ~ item:', item);
		Object.assign(item, {
			sortImg: item.imgUrl,
			sortName: item.title,
			...item,
		});
	});
	emit('openSort', {
		type: 'quickLink',
		list: state.addList,
		data: state.addList,
		rowNum: state.rowItemNum,
		index: props.data.index,
	});
}

const submit = () => {
	// console.log(state.addList, 'state.addList')
	emit('submit', {
		type: 'quickLink',
		list: state.addList,
		rowNum: state.rowItemNum,
		index: props.data.index,
		...actionData,
	});
};

var actionData = {};
const actionChange = (data) => {
	// state.addList[data.cur] = {
	// 	...state.addList[data.cur],
	// 	...data.data,
	// };
	actionData = data.data;
};

// 用于判断 data 是否有数据并且是什么数据类型
function judgment() {
	if (props.data.data instanceof Array) {
		state.addList = JSON.parse(JSON.stringify(props.data.data));
	} else {
		if (props.data.type === 'quickLink') {
			if (props.data.data) {
				state.addList = JSON.stringify(props.data.data) === '{}' ? [] : JSON.parse(JSON.stringify(props.data.data.list));
				state.rowItemNum = JSON.stringify(props.data.data) === '{}' ? 3 : props.data.data.rowNum;
			} else {
				state.addList = JSON.stringify(props.data) === '{}' ? [] : JSON.parse(JSON.stringify(props.data.list));
				state.rowItemNum = JSON.stringify(props.data) === '{}' ? 3 : props.data.rowNum;
			}
		}
	}
}

watch(
	() => props.data,
	(val) => {
		if (val) {
			judgment();
		}
	}
);

onBeforeMount(() => {
	judgment();
});
</script>

<style lang="scss" scoped>
.quick-link-edit {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	background-color: #fff;

	.radio-group {
		width: 100%;
		box-sizing: border-box;
	}

	.box-card {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 12px;
	}
}

.edit_form {
	width: 100%;
	height: 50vh;
	overflow-y: auto;
}
</style>
